<template>
  <!-- 登录后的首页展示内容 由上到下进行分层处理 -->
  <div class="container">
    <div class="deep-container">
      <!-- 第一层   热门学校卡片展示 ---》更多    点击后能够跳转到这个学校旗下的所有课程 -->
      <div class="university">
        <div class="module-title">热门学校</div>
        <div class="card-box">
          <el-row>
            <el-col :span="22">
              <div class="university-box">
                <div class="item-card" style="margin-left:80px">
                  <!-- 学校封面 -->
                  <div class="pic"></div>
                  <!-- 相关信息描述；学校名称、校训、已有课程数、参加（注册学生）、 -->
                  <div>
                    <p class="university-name">重庆交通大学</p>
                    <p class="university-motto">
                      明德行远，交通天下.明德行远，交通天下.明德行远，交通天下
                    </p>
                    <div class="university-last">
                      <div>已开课程: <span>34</span></div>
                      <div>已注册学生：<span>34</span></div>
                    </div>
                  </div>
                </div>
                <div class="item-card">
                  <!-- 学校封面 -->
                  <div class="pic"></div>
                  <!-- 相关信息描述；学校名称、校训、已有课程数、参加（注册学生）、 -->
                  <div>
                    <p class="university-name">重庆交通大学</p>
                    <p class="university-motto">
                      明德行远，交通天下.明德行远，交通天下.明德行远，交通天下
                    </p>
                    <div class="university-last">
                      <div>已开课程: <span>34</span></div>
                      <div>已注册学生：<span>34</span></div>
                    </div>
                  </div>
                </div>
                <div class="item-card">
                  <!-- 学校封面 -->
                  <div class="pic"></div>
                  <!-- 相关信息描述；学校名称、校训、已有课程数、参加（注册学生）、 -->
                  <div>
                    <p class="university-name">重庆交通大学</p>
                    <p class="university-motto">
                      明德行远，交通天下.明德行远，交通天下.明德行远，交通天下
                    </p>
                    <div class="university-last">
                      <div>已开课程: <span>34</span></div>
                      <div>已注册学生：<span>34</span></div>
                    </div>
                  </div>
                </div>
                <div class="item-card">
                  <!-- 学校封面 -->
                  <div class="pic"></div>
                  <!-- 相关信息描述；学校名称、校训、已有课程数、参加（注册学生）、 -->
                  <div>
                    <p class="university-name">重庆交通大学</p>
                    <p class="university-motto">
                      明德行远，交通天下.明德行远，交通天下.明德行远，交通天下
                    </p>
                    <div class="university-last">
                      <div>已开课程: <span>34</span></div>
                      <div>已注册学生：<span>34</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="2" class="more-container">
              <!-- 优化展示动态效果 -->
              <div class="more" @click="moreUniversity()"></div>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 第二层  热门老师 -->
      <div class="master">
        <div>
          <div class="module-title">名师加盟</div>
        </div>
      </div>
      <!-- 第三层 热门比赛   -->
      <div class="match">
        <div class="module-title">热门竞赛</div>
        <div class="match-container">
          <div class="match-header">
            <el-row>
              <el-col :span="1">
                <div class="nav-left"></div>
              </el-col>
              <el-col :span="22">
                <div class="nav-item"></div>
              </el-col>
              <el-col :span="1">
                <div class="nav-right"></div>
              </el-col>
            </el-row>
          </div>
          <div class="match-main">
            <el-card body-style="padding:0" shadow="hover">
              <div class="match-box">
                <div class="form-block">
                  <div class="match-detail">
                    <div class="info-title">
                      <h3
                        class="over-flow-ellipsis"
                        title=" 2022华为嵌入式软件大赛-追光者(算法组北部赛区)"
                      >
                        2022华为嵌入式软件大赛-追光者(算法组北部赛区)
                      </h3>
                      <div class="comp-status-area">
                        <span>火热进行中</span>
                      </div>
                    </div>
                    <div
                      class="match-condition"
                      title="本赛事源自ICT领域实际问题，初赛、复赛和决赛赛题环环相扣，初赛线上小试身手，复赛、总决赛现场激烈比拼，赛题作答需使用当前主流嵌入式开发语言C/C++。"
                    >
                      本赛事源自ICT领域实际问题，初赛、复赛和决赛赛题环环相扣，初赛线上小试身手，复赛、总决赛现场激烈比拼，赛题作答需使用当前主流嵌入式开发语言C/C++。
                    </div>
                    <div class="holder-line">
                      <p class="holder-text over-flow-ellipsis">
                        举办方：华为技术有限公司-ICT产品与解决方案-光产品线
                      </p>
                    </div>
                  </div>
                  <div class="count-block">
                    <div class="center">
                      <!-- 奖励 -->
                      <div class="reward">
                        <span class="reward-title">奖金：</span>
                        <span class="reward-content">￥440,000</span>
                      </div>
                      <!-- 报名数 -->
                      <div class="total">
                        <div class="total-team">
                          <div class="bonus-content">27</div>
                          <div class="bonus-title">团队数</div>
                        </div>
                        <div class="total-team">
                          <div class="bonus-content">68</div>
                          <div class="bonus-title">报名人数数</div>
                        </div>
                      </div>
                      <!-- 截止时间 -->
                      <div class="deadline">
                        <span class="stage-name">初赛截止时间：</span>
                        <span class="end-time">2022/05/17</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <!-- 可变右半部分用于显示报名 -->
                  <div class="btn-info">
                    <div class="big-btn">
                      <button class="devui-btn">立即报名</button>
                    </div>
                    <p style="font-size: 13px">剩余15天4小时</p>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>

      <!-- 第四层 最新开课 -->
      <div class="course">
        <div class="module-title">课程推荐</div>
        <div class="NavHeader">
          <div style="margin-left: 30px">
            <span
              v-for="(item, index) in recommend"
              :key="index"
              :class="{ changeNav: index === currentIndex }"
              @mouseover="change(index)"
              >{{ item }}</span
            >
          </div>
          <div class="_1YQ9J">
            大家都在学：
            <a href="" target="_blank"> 大数据与人工智能 </a>
            <a href="" target="_blank"> 计算机基础与应用 </a>
          </div>
        </div>
        <div class="courseList">
          <div
            class="course-item"
            v-for="(item, index) in defaultCourseList"
            :key="index"
          >
            <!-- 封面 -->
            <div
              class="course-pic"
              :style="{
                height: 126 + 'px',
                background:
                  'url(' + item.coursePicUrl + ')  0px 50% / cover no-repeat',
              }"
            ></div>
            <div class="details">
              <div class="description">
                <!-- 课程名 -->
                <h3 :title="item.courseName">
                  {{ item.courseName }}
                </h3>
                <!-- 出品机构 -->
                <p>{{ item.courseFrom }}</p>
                <!-- 授课人 -->
                <div class="_1Zkj9">{{ item.courseInstructor }}</div>
              </div>
              <div class="condition">
                <span class="people"> 123人参加 </span>
                <div v-if="item.expense === 0" class="expense">
                  <img src="../../assets/images/dollar.png" />
                  免费
                </div>
                <div v-if="item.expense !== 0" class="expense">
                  <img src="../../assets/images/dollar.png" />
                  {{ item.expense }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 数据源
  data() {
    return {
      recommend: ["计算机基础", "程序设计", "算法强化", "考试/考研"],
      currentIndex: 0,
      defaultCourseList: [],
      courseList: [
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
        {
          courseId: "7758258",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/coursepic1.webp",
          courseName: "Python科学计算三维可视化",
          courseFrom: "北京理工大学",
          courseInstructor: "黄天羽",
          expense: 0,
          currentPeople: 123,
        },
      ],
      courseListOfProgramming: [
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
        {
          courseId: "774651",
          coursePicUrl:
            "https://jack-chen.oss-cn-chengdu.aliyuncs.com/%E5%9B%BE%E7%89%87/A633BF6F73EBD3F7C36FA02F0411C19E.webp",
          courseName: "计算机操作系统",
          courseFrom: "电子科技大学",
          courseInstructor: "蒲晓蓉",
          expense: 15,
          currentPeople: 43,
        },
      ],
    };
  },
  //生命周期函数---
  mounted() {
    this.defaultCourseList = this.courseList;
  },
  //基本方法
  methods: {
    // 获取热门学校列表，类似触底刷新 。可以优化的地方：水平动画显示
    moreUniversity() {},
    // 分类获取所有的课程列表
    // 推荐项目，样式改变通知应该调动课程发生变化 同时底部数据发生变化
    change(index) {
      this.currentIndex = index;
      if (index == 0) {
        this.defaultCourseList = this.courseList;
      } else if (index == 1) {
        this.defaultCourseList = this.courseListOfProgramming;
      }
    },
  },
  //计算类型方法和其他方法的区别：有缓存。以内存换时间，适用于频繁使用的计算
  computed() {},
};
</script>

<style   scoped>
.container {
  /* height: 800px; */
}
.deep-container {
  width: 80%;
  height: 100%;
  margin-left: 10%;
}
.university {
  width: 100%;
  height: 400px;
}
.module-title {
  margin-top: 0;
  margin-left: 0;
  height: 50px;
  width: 100px;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  font-weight: bolder;
  margin-left: 20px;
}
.card-box {
  height: 100%;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}
.university-box {
  height: 100%;
  width: 100%;
  display: flex;
}
.item-card {
  width: 250px;
  height: 280px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
  margin-left: 50px;
}
.pic {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 150px;
  width: 100%;
  background: url("../../assets/images/pic02.webp") no-repeat;
  background-size: cover;
}
.university-name {
  font-size: 15px;
  font-weight: bolder;
}
.university-motto {
  font-size: 13px;
  line-height: 15px;
  color: rgb(161, 161, 161);
}
.university-motto:hover {
  color: rgb(104, 222, 155);
}
.university-last {
  font-size: 12px;
}
.more-container {
  position: relative;
}
/* 热门竞赛模块样式 */
.match {
}
.match-container {
  min-height: 600px;
  background-color: #fff;
}
.nav-left {
  min-height: 36px;
  background-color: #00cc7e;
}
.nav-item {
  min-height: 36px;
  background-color: #666;
}
.nav-right {
  min-height: 36px;
  background-color: blue;
}
.match-main {
  min-height: 600px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.match-box {
  display: flex;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  border-bottom: 1px solid #f2f2f2;
  border-left: 1px solid #f2f2f2;
  border-right: 1px solid #f2f2f2;
  transition: 0.2s;
  height: 200px;
  width: 100%;
}
.form-block {
  display: flex;
  padding: 24px 0 25px 24px;
  width: 987px;
}
.match-detail {
  display: block;
  width: 650px;
}
.info-title {
  overflow: hidden;
  display: flex;
  align-items: center;
}
.over-flow-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.comp-status-area {
  background: #c7000b;
  display: inline-block;
  font-size: 12px;
  color: #fff;
  letter-spacing: 0;
  line-height: 18px;
  padding: 0 5px;
  margin-left: 15px;
  border-radius: 3px;
  margin-top: 4px;
  height: 18px;
}
.match-condition {
  width: 100%;
  font-size: 16px;
  color: #575d6c;
  letter-spacing: 0;
  line-height: 22px;
  height: 44px;
  margin-bottom: 14px;
  overflow: hidden;
  word-break: break-all;
  text-align: left;
}
.holder-line {
  font-size: 14px;
  color: #575d6c;
  letter-spacing: 0;
  line-height: 18px;
  height: 18px;
}
.holder-text {
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}
.count-block {
  width: 333px;
}
.center {
  margin: 0 auto;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  width: 220px;
}
.reward {
  font-size: 20px;
  color: #c7000b;
  letter-spacing: 0;
  line-height: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  margin-top: 20px;
}
.total {
  display: flex;
  margin-bottom: 8px;
}
.total-team {
  flex: 1;
  width: 1px;
  border-right: 1px solid #fff;
  background-color: #f2f5fc;
  padding: 6px 0;
  border-radius: 3px;
}
.bonus-content {
  font-size: 18px;
  color: #252b3a;
  letter-spacing: 0;
  line-height: 18px;
  font-weight: 700;
}
.bonus-title {
  font-size: 12px;
  color: #3b4251;
  letter-spacing: 0;
  line-height: 18px;
}
.deadline {
  font-size: 13px;
  color: #575d6c;
  letter-spacing: 0;
  line-height: 22px;
  font-weight: 700;
  font-family: Roboto, Microsoft YaHei, 微软雅黑, sans-serif;
}

.right {
  width: 230px;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-info {
  text-align: center;
  cursor: pointer;
}
.big-btn {
  margin-bottom: 8px;
  border-radius: 2px;
  transition: 0.2s;
  text-align: center;
}
.devui-btn {
  cursor: pointer;
  height: 40px;
  padding: 0 32px;
  font-size: 14px;
  border-radius: 2px;
  align-items: center;
  border-style: solid;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  line-height: 1.5;
  border-color: transparent;
  border-width: 1px;
  color: #fff;
  min-width: 80px;
  background-color: #c7000b;
}
.more {
  /* 内嵌箭头，手型 变色，点击函数 */
  height: 40px;
  width: 40px;
  background: url("../../assets/images/right.png") no-repeat;
  background-size: cover;
  cursor: pointer;
  color: rgb(22, 3, 3);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.NavHeader {
  line-height: 28px;
  margin-top: 15px;
  border-bottom: 1px solid #e6e6e6;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(230, 230, 230);
  display: flex;
  justify-content: space-between;
}
.NavHeader span {
  color: #666;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
  margin-right: 32px;
  height: 35px;
}
.changeNav {
  color: #00cc7e;
  border-bottom: 2px solid #00cc7e;
}
._1YQ9J {
  float: right;
  color: #999;
  font-size: 12px;
}
._1YQ9J a {
  color: #666;
  display: inline-block;
  margin-left: 8px;
  height: 24px;
  line-height: 24px;
  padding: 0 16px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-decoration: none;
}
._1YQ9J a:hover {
  color: rgb(32, 206, 108);
  background-color: rgb(229, 249, 238);
}
.courseList {
  min-height: 200px;
  overflow: hidden;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
}
.course-item {
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 224px;
  height: 252px;
  border-radius: 8px;
  background: #fff;
  margin-left: 30px;
  margin-bottom: 20px;
}
.course-pic {
  height: 126px;
}
.course-item .details {
  position: relative;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 126px;
  border-radius: 0 0 8px 8px;
}

.details .description h3 {
  text-align: left;
  max-height: 36px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  line-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
}
.details .description p {
  text-align: left;
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  margin-top: -5px;
}
._1Zkj9 {
  text-align: left;
  width: 100%;
  height: 17px;
  line-height: 17px;
  margin: 8px 0 50 0;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.details .condition {
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  color: #999;
  overflow: hidden;
  position: absolute;
  bottom: 11px;
  width: calc(100% - 24px);
}
.people {
  float: right;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  text-align: right;
}
.expense {
  color: #53b880;
  float: left;
}
</style>